<template>
    <div>
        <section class="login_message">
            <input type="tel" maxlength="11" placeholder="手机号" v-model="phone">
            <button :disabled="!rightPhone" class="get_vertification" :class="{right_phone:rightPhone}"
            @click.prevent="getCode">{{computeTime>0?`已发送(${computeTime}s)`:'获取验证码'}}</button>

        </section>

        <div class="button-container">

        <section class="login_vertification">
            <input type="tel" maxlength="8" placeholder="验证码" v-model="code">
        </section>
        </div>
    </div>

</template>

<script>
    export default {
        name: "number",
        data() {
            return {
               phone:'',
                computeTime:0,
                isOn:true,
                Toright:false,
                code:'',
            };
        },
    methods:{
        changeButton(){
        },
        getCode(){
            //如果当前没有计时
            if(!this.computeTime){
                this.computeTime = 30
                const intervalId =setInterval(()=>{
                    this.computeTime--
                    if(this.computeTime<=0)
                    {
                        clearInterval(intervalId)
                    }
                },1000)
                //发送ajax请求（向指定手机发送验证码）
            }

        },

    },
        computed:{
            rightPhone(){
                return /^1\d{10}$/.test(this.phone)  //匹配phone
            }
        }

    }
</script>

<style scoped lang="scss">


       .get_vertification{
           .right_phone{color: black}
       }
       .switch-right{
           width: 60px;
           height: 30px;
           border: 1px solid #6d6d72;
           border-radius: 5%;
           .circle{position:absolute;z-index:99;background: red;width: 20px;height: 20px;border-radius: 50%;left:0px;transition:0.5s;transform: translateX(0)}
           .txt{position: absolute}
       }

    .right{
        .circle{position:absolute;background: red;width: 20px;height: 20px;border-radius: 50%;left: 45px;transition:0.5s;transform: translateX(45)}
        .txt{display: none}
    }
</style>